<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/jquery-2.1.1.js"></script>
    <script src="./js/underscore.js"></script>
    <script src="./js/backbone.js"></script>
</head>
<body>
hello backbone

<script type="text/template" id="search_template">
    <label><%= search_label %></label>
    <input type="text" id="search_input"/>
    <input type="button" id="search_button" value="Search"/>
</script>

<div id="search_container"></div>

<script type="text/javascript">
    SearchView = Backbone.View.extend({
        initialize: function () {
            this.render();
        },
        render: function () {
            // Compile the template using underscore
            var template = _.template($("#search_template").html());

            //Pass variables in using Underscore.js Template
            var variables = { search_label: "My Search" };
            var compiled = template(variables);

            // Load the compiled HTML into the Backbone "el"
            this.$el.html(compiled);
        },
        events: {
            "click input[type=button]": "doSearch"
        },
        doSearch: function (event) {
            // Button clicked, you can access the element that was clicked with event.currentTarget
            alert("Search for " + $("#search_input").val());
        }
    });

    var search_view = new SearchView({ el: $("#search_container") });
</script>

</body>
</html>